import React , { Component } from 'react';
import { NavLink} from 'react-router-dom';

class View extends Component {
    constructor(props){
        super(props);
        this.alertTip = this.alertTip.bind(this);
    }
    alertTip(e){
        console.log(e);
        console.log('我被点击');
        /*
            事件 驼峰 onClick
            1、onClick={this.alertTip}
                正常函数时 this 为undefined
            2、bind this
                this.alertTip = this.alertTip.bind(this);
            3、es6 剪头函数
                alertTip2 = () =>{}
            4、正常函数体
                调用时增加箭头函数 onClick={()=>this.alertTip3()}
        */
    }
    alertTip2 = () =>{
        console.log(this);
        console.log('es6：我被点击');
    }
    alertTip3(){
        console.log(this);
        console.log('再次被点击');
    }
    alertTip4(e){
        // 阻止默认事件，与原js return false;
        // 比如给a 添加事件会跳转 e.preventDefault();
        e.preventDefault();
        // 事件冒泡
        e.stopPropagation();
        console.log('这是第四次被点击');
    }
    render(){
        const ks = {
            type:2
        }
        //  1 2 3
        //  1 你好  2 他好  3 大家好
        // <span> </span>
        const ksFy = {
            '1':'你好',
            '2':'他好',
            '3':'大家好'
        }
        console.log(ksFy[ks.type])
        return (
            <div className="event_con" onClick={this.alertTip}>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/input">表单</NavLink><br/>
                <NavLink to="/event">事件</NavLink><br/>
                <NavLink to="/tab">tab</NavLink>
                <h2>这是event事件课程</h2>
                <div><span onClick={this.alertTip}>点我</span></div>
                <div><span onClick={this.alertTip2}>es6点我</span></div>
                <div><span onClick={()=>this.alertTip3()}>再次被点击</span></div>
                <div><a href="true"
                onClick={(e)=>this.alertTip4(e)}>
                这是a标签点击</a></div>
            </div>
        )
    }
}
export default View;
